<template>
  <div class='user-info pa'>
    <header>
      <img :src="userLogo" alt="user-pic">
      <span>hi，欢迎</span>
    </header>
    <main>
      <div class="btns">
        <span v-for="(item, index) in tabData" :key="index" :class="item.class" @click="doClick(item)">{{item.label}}</span>
      </div>
      <div class="notice-box"><Notice /></div>
      <div class="tab-box"><Tabs /></div>
    </main>
  </div>
</template>
<script>
import Notice from './notice.vue'
import Tabs from './tab.vue'
export default {
  components: {Notice,Tabs},
  name: "",
  data() {
    return {  
      userLogo:require('@/assets/imgs/homepage/user.jpg'),
      tabData:[
        {label:"登录",class:"login-btn hover",router:"/login"},
        {label:"注册",class:"register-btn hover",router:"/login/register"}
      ]
    };
  },
  methods: {
    /**
     * @name 执行click
     */
    doClick(item){
      if(item.router)this.$router.push(item.router)
    },
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.user-info {
  width: 250px;
  height: 430px;
  background-color: #fff;
  right: calc(50% - 600px);
  top: 10px;
  z-index: 50;

  header{
    display: flex;
    font-size: 13px;
    color: #333;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    margin: 10px 0;

    img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 20px;
    }
  }
  .btns{
    padding: 0 10px;
    display: flex;
    
    span{
      flex: 1;
      text-align: center;
      font-size: 12px;
      color: #fff;
      line-height: 30px;
      box-sizing: border-box;
    }
    .login-btn{
      background-color: $blue;
      margin-right: 10px;
    }
    .register-btn{
      color: $blue;
      border: 1px solid $blue;
    }
  }
  .notice-box{
    padding: 6px 0;
    box-sizing: border-box;
    height: 30px;
    overflow: hidden;
  }
}
</style>